<div id="sideMenuScrim" ng-if="audioOutputs.menuVisible" ng-click="audioOutputs.toggleMenu()"></div>
<div id="sideMenu">


  <div role="group" ng-if="audioOutputs.menuVisible" class="outputs__menu">
    <div ng-if="audioOutputs.defaultView" class="outputs__overview">

      <div class="outputs__title align-items-center">
        <div class="outputs__title__text" translate="MULTIDEVICE.ZONES_AND_OUTPUTS">
        </div>
        <div ng-if="audioOutputs.audioOutputsService.thisOutput.groupable" class="outputs__title__action">
          <button ng-click="audioOutputs.toggleView()" class="outputs__action" translate="MULTIDEVICE.GROUP_DEVICES">
            <i class="outputs__action__icon material-icons">speaker_group</i>
          </button>
        </div>
      </div> <!-- /.outputs__title -->

      <div ng-if="audioOutputs.audioOutputsService.thisOutput && !audioOutputs.audioOutputsService.hasLeader()">
        <div class="outputs__subtitle small link" translate="MULTIDEVICE.THIS_DEVICE">
        </div>

        <div class="outputs__device device">
          <div ng-if="audioOutputs.audioOutputsService.thisOutput.state" ng-click="audioOutputs.onDeviceClick(audioOutputs.audioOutputsService.thisOutput)" class="device__thumb">
            <img ng-src="{{audioOutputs.playerService.getAlbumart(audioOutputs.audioOutputsService.thisOutput.state.albumart)}}" alt="cover image">
          </div>
          <div class="device__info">
            <div class="device__title">
              <div ng-click="audioOutputs.onDeviceClick(audioOutputs.audioOutputsService.thisOutput)" class="device__title__text clickable">{{ audioOutputs.audioOutputsService.thisOutput.name }}</div>
              <!-- <div class="device__actions">
                <div ng-if="audioOutputs.audioOutputsService.thisOutput.volumeAvailable" class="device__volume">
                  <label for="{{audioOutputs.audioOutputsService.thisOutput.id}}-main" class="outputs__action device__control device__control--volume" title="{{ 'COMMON.TAB_VOLUME' | translate }} {{audioOutputs.audioOutputsService.thisOutput.state.volume}}">
                    <i class="outputs__action__icon fa fa-volume-up"></i>
                  </label>
                  <input hidden class="volume-control-activator" id="{{audioOutputs.audioOutputsService.thisOutput.id}}-main" type="checkbox">
                  <div class="volume-control__popover">
                    <input type="range" name="volume-slider" id="volume-slider" min="0"
                      max="100" ng-model="audioOutputs.audioOutputsService.thisOutput.state.volume" style="width:100%!important" class="list-item-volume-bar" ng-change="audioOutputs.onDeviceVolumeChange(audioOutputs.audioOutputsService.thisOutput)" />
                  </div>
                </div>
              </div> -->
            </div> <!-- /.device__title -->
            <div ng-if="audioOutputs.audioOutputsService.thisOutput.volumeAvailable" class="device__volume">
              <label for="{{audioOutputs.audioOutputsService.thisOutput.id}}-main" class="outputs__action device__control device__control--volume" title="{{ 'COMMON.TAB_VOLUME' | translate }} {{audioOutputs.audioOutputsService.thisOutput.state.volume}}">
                <i class="outputs__action__icon fa fa-volume-up"></i>
              </label>
              <div class="volume-control__popover">
                <input type="range" name="volume-slider" id="volume-slider" min="0"
                  max="100" ng-model="audioOutputs.audioOutputsService.thisOutput.state.volume" style="width:100%!important" class="list-item-volume-bar" ng-change="audioOutputs.onDeviceVolumeChange(audioOutputs.audioOutputsService.thisOutput)" />
              </div>
            </div> <!-- /.volume temporaray place -->
            <div class="device__meta">
              <button ng-if="(audioOutputs.audioOutputsService.thisOutput.state.status === 'pause' || audioOutputs.audioOutputsService.thisOutput.state.status === 'stop') && audioOutputs.audioOutputsService.thisOutput.available" ng-click="audioOutputs.audioOutputsService.audioOutputPlay(audioOutputs.audioOutputsService.thisOutput)" class="outputs__action device__control device__control--play">
                <i class="fa fa-play"></i>
              </button>
              <button ng-if="audioOutputs.audioOutputsService.thisOutput.state.status === 'play' && audioOutputs.audioOutputsService.thisOutput.available" ng-click="audioOutputs.audioOutputsService.audioOutputPause(audioOutputs.audioOutputsService.thisOutput)" class="outputs__action device__control device__control--play">
                <i class="fa fa-pause"></i>
              </button>
              <span class="device__meta__song" title="{{ audioOutputs.audioOutputsService.thisOutput.state.track }} - {{ audioOutputs.audioOutputsService.thisOutput.state.artist }}">
                {{ audioOutputs.audioOutputsService.thisOutput.state.artist }}
                <span ng-if="audioOutputs.audioOutputsService.thisOutput.state.artist && audioOutputs.audioOutputsService.thisOutput.state.track"> - </span>
                {{ audioOutputs.audioOutputsService.thisOutput.state.track }}</span>
            </div>
          </div> <!-- /.device__info -->
        </div> <!-- /.outputs__device -->
      </div> <!-- THIS DEVICE -->

      <!-- GROUP -->
      <div ng-if="audioOutputs.audioOutputsService.groupedOutputs.length > 0">
        <div class="outputs__subtitle small link" translate="MULTIDEVICE.ACTIVE_GROUP">
        </div>

        <div ng-repeat="group in audioOutputs.audioOutputsService.groupedOutputs" class="outputs__device device groupped">
          <div class="device__thumb" ng-click="audioOutputs.onDeviceClick(group.leader)">
            <img ng-src="{{audioOutputs.playerService.getAlbumart(group.leader.state.albumart)}}" alt="cover image">
          </div>
          <div class="device__info">
            <div class="device__meta">
              <button ng-if="group.leader.state.status === 'pause' || group.leader.state.status === 'stop'" ng-click="audioOutputs.audioOutputsService.audioOutputPlay(group.leader)" class="outputs__action device__control device__control--play">
                <i class="fa fa-play"></i>
              </button>
              <button ng-if="group.leader.state.status === 'play'" ng-click="audioOutputs.audioOutputsService.audioOutputPause(group.leader)" class="outputs__action device__control device__control--play">
                <i class="fa fa-pause"></i>
              </button>
              <span class="device__meta__song" title="{{ group.leader.state.track }} - {{ group.leader.state.artist }}">
                {{ group.leader.state.artist }}
                <span ng-if="group.leader.state.artist && group.leader.state.track"> - </span>
                 {{ group.leader.state.track }}</span>
            </div>
          </div> <!-- /.device__info -->

          <div class="device__group">

            <div class="device__group__item">
              <div class="device__title">
                <div class="device__title__text" ng-click="audioOutputs.onDeviceClick(group.leader)">{{ group.leader.name }}</div>
                <!-- <div class="device__actions">
                  <div ng-if="group.leader.volumeAvailable" class="device__volume">
                    <label for="{{group.leader.id}}-main" class="outputs__action device__control device__control--volume" title="{{ 'COMMON.TAB_VOLUME' | translate }} {{group.leader.state.volume}}">
                      <i class="outputs__action__icon fa fa-volume-up"></i>
                    </label>
                    <input hidden class="volume-control-activator" id="{{group.leader.id}}-main" type="checkbox">
                    <div class="volume-control__popover">
                      <input type="range" name="volume-slider" id="volume-slider" min="0"
                        max="100" ng-model="group.leader.state.volume" style="width:100%!important" class="list-item-volume-bar" ng-change="audioOutputs.onDeviceVolumeChange(group.leader)" />
                    </div>
                  </div>
                </div> -->
              </div> <!-- /.device__title -->
              <div ng-if="group.leader.volumeAvailable" class="device__volume">
                <label for="{{group.leader.id}}-main" class="outputs__action device__control device__control--volume" title="{{ 'COMMON.TAB_VOLUME' | translate }} {{group.leader.state.volume}}">
                  <i class="outputs__action__icon fa fa-volume-up"></i>
                </label>
                <div class="volume-control__popover">
                  <input type="range" name="volume-slider" id="volume-slider" min="0"
                    max="100" ng-model="group.leader.state.volume" style="width:100%!important" class="list-item-volume-bar" ng-change="audioOutputs.onDeviceVolumeChange(group.leader)" />
                </div>
              </div> <!-- /.volume temporaray place -->
              <div ng-if="group.leader.id === audioOutputs.audioOutputsService.thisDeviceID" class="device__meta" translate="MULTIDEVICE.THIS_DEVICE">
              </div>
              <div ng-if="group.leader.id !== audioOutputs.audioOutputsService.thisDeviceID" class="device__meta" translate="MULTIDEVICE.GROUP_LEADER">
              </div>
            </div> <!-- /.device__group__item -->

            <div ng-repeat="output in group.children" class="device__group__item">
              <div class="device__title">
                <div class="device__title__text" ng-click="audioOutputs.onDeviceClick(output)">{{ output.name }}</div>
                <!-- <div class="device__actions">
                  <div ng-if="output.volumeAvailable" class="device__volume">
                    <label for="{{output.id}}-main" class="outputs__action device__control device__control--volume" title="{{ 'COMMON.TAB_VOLUME' | translate }} {{output.state.volume}}">
                      <i class="outputs__action__icon fa fa-volume-up"></i>
                    </label>
                    <input hidden class="volume-control-activator" id="{{output.id}}-main" type="checkbox">
                    <div class="volume-control__popover">
                      <input type="range" name="volume-slider" id="volume-slider" min="0"
                        max="100" ng-model="output.state.volume" style="width:100%!important" class="list-item-volume-bar" ng-change="audioOutputs.onDeviceVolumeChange(output)" />
                    </div>
                  </div>
                </div> -->
              </div> <!-- /.device__title -->
              <div ng-if="output.volumeAvailable" class="device__volume">
              <label for="{{output.id}}-main" class="outputs__action device__control device__control--volume" title="{{ 'COMMON.TAB_VOLUME' | translate }} {{output.state.volume}}">
                <i class="outputs__action__icon fa fa-volume-up"></i>
              </label>
              <div class="volume-control__popover">
                <input type="range" name="volume-slider" id="volume-slider" min="0"
                  max="100" ng-model="output.state.volume" style="width:100%!important" class="list-item-volume-bar" ng-change="audioOutputs.onDeviceVolumeChange(output)" />
              </div>
            </div> <!-- /.volume temporaray place -->
              <div class="device__meta">
                <button ng-click="audioOutputs.audioOutputsService.disableAudioOutput(output.id)" class="outputs__action outputs__action--primary">Remove</button>
              </div>
            </div> <!-- /.device__group__item -->

          </div> <!-- /.device__group -->

          <div class="device__group__action">
            <button ng-click="audioOutputs.audioOutputsService.removeAllDevices()" class="outputs__action" translate="MULTIDEVICE.REMOVE_ALL_DEVICES">
              <i class="outputs__action__icon material-icons device__group__remove-icon">speaker_group</i>
            </button>
          </div> <!-- /.device__group__action -->
        </div> <!-- device groupped -->

        </div> <!-- /.outputs__device groupped -->

      <!-- /GROUP -->

      <div ng-if="audioOutputs.audioOutputsService.availableOutputs().length > 0">
        <div class="outputs__subtitle small link"  translate="MULTIDEVICE.AVAILABLE_DEVICES">
        </div>

        <div ng-repeat="output in audioOutputs.audioOutputsService.availableOutputs()" class="outputs__device device">
          <div ng-if="output.state" class="device__thumb" ng-click="audioOutputs.onDeviceClick(output)">
            <img ng-src="{{audioOutputs.playerService.getAlbumart(output.state.albumart)}}" alt="cover image">
          </div>
          <div class="device__info">
            <div class="device__title">
              <div class="device__title__text" ng-click="audioOutputs.onDeviceClick(output)">{{ output.name }}</div>
              <div class="device__actions">
                <!-- <div ng-if="output.volumeAvailable" class="device__volume">
                  <label for="{{output.id}}-main" class="outputs__action device__control device__control--volume" title="{{ 'COMMON.TAB_VOLUME' | translate }} {{output.state.volume}}">
                    <i class="outputs__action__icon fa fa-volume-up"></i>
                  </label>
                  <input hidden class="volume-control-activator" id="{{output.id}}-main" type="checkbox">
                  <div class="volume-control__popover">
                    <input type="range" name="volume-slider" id="volume-slider" min="0"
                      max="100" ng-model="output.state.volume" style="width:100%!important" class="list-item-volume-bar" ng-change="audioOutputs.onDeviceVolumeChange(output)" />
                  </div>
                </div> -->
              </div>
            </div> <!-- /.device__title -->
            <div ng-if="output.volumeAvailable" class="device__volume">
              <label for="{{output.id}}-main" class="outputs__action device__control device__control--volume" title="{{ 'COMMON.TAB_VOLUME' | translate }} {{output.state.volume}}">
                <i class="outputs__action__icon fa fa-volume-up"></i>
              </label>
              <div class="volume-control__popover">
                <input type="range" name="volume-slider" id="volume-slider" min="0"
                  max="100" ng-model="output.state.volume" style="width:100%!important" class="list-item-volume-bar" ng-change="audioOutputs.onDeviceVolumeChange(output)" />
              </div>
            </div> <!-- /.volume temporaray place -->
            <div class="device__meta">
              <button ng-if="(output.state.status === 'pause' || output.state.status === 'stop') && output.available" ng-click="audioOutputs.audioOutputsService.audioOutputPlay(output)" class="outputs__action device__control device__control--play">
                <i class="fa fa-play"></i>
              </button>
              <button ng-if="output.state.status === 'play' && output.available" ng-click="audioOutputs.audioOutputsService.audioOutputPause(output)" class="outputs__action device__control device__control--play">
                <i class="fa fa-pause"></i>
              </button>
              <span class="device__meta__song" title="{{ output.state.track }} - {{ output.state.artist }}">
                <span ng-if="output.state.artist && output.state.artist !== 'undefined'">{{ output.state.artist }}</span>
                <span ng-if="output.state.artist && output.state.artist !== 'undefined' && output.state.track && output.state.track !== 'undefined'"> - </span>
                <span ng-if="output.state.track && output.state.track !== 'undefined'">{{ output.state.track }}</span></span>
            </div>
          </div> <!-- /.device__info -->
        </div> <!-- /.outputs__device -->

      </div> <!-- AVAILABLE DEVICES -->

    </div> <!-- /.outputs__overview -->

    <!-- ====== GROUPING ====== -->

    <div ng-if="audioOutputs.groupView" class="outputs__grouping">
      <!-- Use this div to enter into grouping mode -->
      <div class="outputs__title align-items-center">
        <div class="outputs__title__text" translate="MULTIDEVICE.GROUP_DEVICES">
        </div>
        <div class="outputs__title__action">
          <button ng-click="audioOutputs.toggleView()" class="outputs__action" translate="COMMON.DONE">
          </button>
        </div>
      </div> <!-- /.outputs__title -->

      <div class="outputs__device device">
        <div class="device__thumb small">
          <img ng-src="{{ audioOutputs.playerService.getAlbumart(audioOutputs.audioOutputsService.thisOutput.state.albumart) }}" alt="cover image">
        </div>
        <div class="device__info">

          <div class="device__title">
            <div class="device__title__text">{{ audioOutputs.audioOutputsService.thisOutput.name }}</div>
          </div> <!-- /.device__title -->
          <div class="device__meta">
            <span class="device__meta__song" translate="MULTIDEVICE.THIS_DEVICE"></span>
          </div>

          <div ng-repeat="output in audioOutputs.audioOutputsService.enabledOutputs()" class="device__title">
            <div class="device__title__text">{{ output.name }}</div>
            <div class="device__actions">
              <button ng-click="audioOutputs.audioOutputsService.disableAudioOutput(output.id)" class="outputs__action outputs__action--primary" translate="COMMON.REMOVE"></button>
            </div>
          </div> <!-- /.device__title -->

        </div> <!-- /.device__info -->

      </div> <!-- /.device -->

      <div ng-if="audioOutputs.audioOutputsService.enabledOutputs().length > 0" class="device__group__action">
        <button ng-click="audioOutputs.audioOutputsService.removeAllDevices()" class="outputs__action" translate="MULTIDEVICE.REMOVE_ALL_DEVICES">
          <i class="outputs__action__icon material-icons device__group__remove-icon">speaker_group</i>
        </button>
      </div> <!-- /.device__group__action -->

      <div>
        <div ng-if="audioOutputs.audioOutputsService.groupableOutputs().length > 0" class="outputs__subtitle small" translate="MULTIDEVICE.AVAILABLE_DEVICES">
        </div>
        <div ng-repeat="output in audioOutputs.audioOutputsService.groupableOutputs()" class="outputs__device device {{ output.groupable ? '' : 'disabled'}}">
          <div class="device__thumb small">
            <img ng-src="{{audioOutputs.playerService.getAlbumart(output.state.albumart)}}" alt="cover image">
          </div>
          <div class="device__info">

            <div class="device__title">
              <div class="device__title__text">{{ output.name }}</div>
              <div ng-if="output.groupable" class="device__actions">
                <button ng-if="!output.enabled" ng-click="audioOutputs.audioOutputsService.enableAudioOutput(output.id)" class="outputs__action outputs__action--primary">Add</button>
                <button ng-if="output.enabled" ng-click="audioOutputs.audioOutputsService.disableAudioOutput(output.id)" class="outputs__action outputs__action--primary">Remove</button>
              </div>
              <div ng-if="!output.groupable" class="device__actions">
                <i class="fa fa-ban"></i>
              </div>
            </div> <!-- /.device__title -->
            <div ng-if="!output.groupable" class="device__meta">
              <span class="device__meta__song" translate="MULTIDEVICE.SYNCED_PLAYBACK_NOT_AVAILABLE"></span>
            </div>

          </div> <!-- /.device__info -->

        </div> <!-- /.device -->
      </div> <!-- GROUPABLE DEVICES -->

    </div> <!-- /.outputs__grouping -->


  </div> <!-- /.outputs__menu -->

</div>
